<!-- 大幕弹屏 -->
<template>
    <div ref="barrageContainer"></div>
</template>

<script setup>
import { defineProps, ref, watch, nextTick } from "vue";
import Barrage from "barrage-ui";
import { barrages, randomColor, randomKey } from "../mock/data";
const barrageContainer = ref(); // 弹屏容器
let barrage;
console.log(barrages);
nextTick(() => {
    barrage = new Barrage({
        container: barrageContainer.value,
        data: barrages,
        avoidOverlap: false,
        config: {
            duration: 10000,
            defaultColor: "#fff", // 默认颜色，与 CSS 颜色属性一致
        },
    });
});
const props = defineProps({
    wish: {
        type: String,
        default: "",
    },
    canStart: {
        type: Boolean,
        default: false,
    },
});
// 弹屏动画
const barrageAnimationStart = () => {
    nextTick(() => {
        barrage.play(); // 开始弹屏
        setTimeout(() => {
            barrage.add({
                key: randomKey(),
                time: 1000,
                text: props.wish,
                fontSize: 24,
                color: randomColor(),
            });
        }, 500);
    });
};
watch(
    () => props.canStart,
    (val) => {
        console.log(val);
        val && barrageAnimationStart();
    }
);
</script>

<style lang="less">
.barrage-container {
    position: absolute;
    height: 250px;
    width: 100%;
    bottom: 15px;
    left: 0;
}
</style>
